<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二阶魔方</title>
    <link href="stylesheets/doc.css" rel="stylesheet">
    <link href="stylesheets/cube2.css" rel="stylesheet">
    <!--<script src="scripts/JQuery/jquery.min.js"></script>-->
    <script src="scripts/Cube2.js"></script>
</head>
<body>
<header id="head">二阶魔方</header>
<div class="container">
    <div class="box">
        <div class="content">
            <div class="f surface">
                <div class="cube-bloc" id="f0"></div>
                <div class="cube-bloc" id="f1"></div>
                <div class="cube-bloc" id="f2"></div>
                <div class="cube-bloc" id="f3"></div>
            </div>
            <div class="b surface">
                <div class="cube-bloc" id="b0"></div>
                <div class="cube-bloc" id="b1"></div>
                <div class="cube-bloc" id="b2"></div>
                <div class="cube-bloc" id="b3"></div>
            </div>
            <div class="l surface">
                <div class="cube-bloc" id="l0"></div>
                <div class="cube-bloc" id="l1"></div>
                <div class="cube-bloc" id="l2"></div>
                <div class="cube-bloc" id="l3"></div>
            </div>
            <div class="r surface">
                <div class="cube-bloc" id="r0"></div>
                <div class="cube-bloc" id="r1"></div>
                <div class="cube-bloc" id="r2"></div>
                <div class="cube-bloc" id="r3"></div>
            </div>
            <div class="u surface">
                <div class="cube-bloc" id="u0"></div>
                <div class="cube-bloc" id="u1"></div>
                <div class="cube-bloc" id="u2"></div>
                <div class="cube-bloc" id="u3"></div>
            </div>
            <div class="d surface">
                <div class="cube-bloc" id="d0"></div>
                <div class="cube-bloc" id="d1"></div>
                <div class="cube-bloc" id="d2"></div>
                <div class="cube-bloc" id="d3"></div>
            </div>
            <div class="x-f surface">
                <div class="x-center center-face surface"></div>
            </div>
            <div class="y-f surface">
                <div class="y-center center-face surface"></div>
            </div>
            <div class="z-f surface">
                <div class="z-center center-face surface"></div>
            </div>
            <div class="cf surface"></div>
            <div class="cr surface"></div>
            <div class="cu surface"></div>
        </div>
    </div>
</div>
<div style="position: absolute;right:0;top:0;">
    <div class="control">
        <button id="btn-control">启用控制按钮</button>
    </div>
    <div class="model-buttons">
        <button class="model-button" id="R">上(R)</button>
        <button class="model-button" id="R-">下(R-)</button>
        <button class="model-button" id="U">左(U)</button>
        <button class="model-button" id="U-">右(U-)</button>
        <button class="model-button" id="TR"> →</button>
        <button class="model-button" id="TL"> ←</button>
        <button class="model-button" id="TD"> ↙</button>
        <button class="model-button" id="TU"> ↗</button>
        <button class="model-button" id="RL"> ↖</button>
        <button class="model-button" id="LR"> ↘</button>
        <button class="model-button" id="L">L</button>
        <button class="model-button" id="L-">L-</button>
        <button class="model-button" id="D">D</button>
        <button class="model-button" id="D-">D-</button>
        <button class="model-button" id="F">F</button>
        <button class="model-button" id="F-">F-</button>
        <button class="model-button" id="B">B</button>
        <button class="model-button" id="B-">B-</button>
        <button class="handle model-button" id="init">重置</button>
        <button class="handle model-button" id="break">打乱</button>
    </div>
</div>
</body>
</html>